<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 图表实例</h4>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>日在线用户  <small>Daily online users</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="btn-group btn-group-xs" data-toggle="buttons">
									<label class="btn btn-white active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> 最近7天
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近2周
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近30天
									</label>
								</div>
							</div>
							<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
							<div id="daily-online" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>月在线用户  <small>Monthly online users</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="btn-group btn-group-xs" data-toggle="buttons">
									<label class="btn btn-white active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> 最近6月
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近12月
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近24月
									</label>
								</div>
							</div>
							<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
							<div id="monthly-online" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>活跃用户  <small>Active users</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="btn-group btn-group-xs" data-toggle="buttons">
									<label class="btn btn-white active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> 最近7天
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近30天
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近6月
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近12月
									</label>
								</div>
							</div>
							<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
							<div id="active-users" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>新增用户  <small>New users</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="btn-group btn-group-xs" data-toggle="buttons">
									<label class="btn btn-white active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> 最近7天
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近30天
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近6月
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 最近12月
									</label>
								</div>
							</div>
							<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
							<div id="new-users" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>用户地理分布图  <small>New users</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="btn-group btn-group-xs" data-toggle="buttons">
									<label class="btn btn-white active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> 所有用户
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 活跃用户
									</label>
									<label class="btn btn-white">
										<input type="radio" name="options" id="option3" autocomplete="off" /> 新增用户
									</label>
								</div>
							</div>
							<div class="row">
								<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
								<div id="user-distribution-map" style="height:400px"></div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
									<div id="user-distribution-pie" style="height:400px"></div>
								</div>
								<div class="col-sm-6">
									<h3 class="text-center text-primary mbn mtm">四川省各市分布排行</h3>
									<p class="text-center yahei font-12 color-gray">数量排名前十</p>
									<table class="table table-condensed mtl">
										<tbody>
											<tr>
												<td>1</td>
												<td>成都</td>
												<td>142万</td>
												<td>20%</td>
											</tr>
											<tr>
												<td>2</td>
												<td>绵阳</td>
												<td>61万</td>
												<td>10%</td>
											</tr>
											<tr>
												<td>3</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>4</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>5</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>6</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>7</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>8</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>9</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
											<tr>
												<td>10</td>
												<td>城市名</td>
												<td>111</td>
												<td>5%</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
		<!-- echarts -->
		<!--Step:3 引入theme.js主题-->
		<script src="../js/plugins/echarts/theme.js"></script>
		<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
		<script src="../js/plugins/echarts/echarts-plain-map.js"></script>
		<script type="text/javascript">
	        // Step:4 <script>标签内动态加载echarts和所需图表，echarts和zrender被echarts-plain-map.js写入为全局接口
            var chart_01 = echarts.init(document.getElementById('daily-online'),flat);//初始化时添加主题
            chart_01.setOption({
				tooltip : {
				    trigger: 'axis',
					formatter: function(v) {
					    return v[0][1] + '<br/>'
					           + v[0][0] + ' : ' + v[0][2] + ' (万)';
					}
				},
				legend: {
				    data:['日在线用户']
				},
				toolbox: {
				    show : true,
				    feature : {
				        magicType : {show: true, type: ['line', 'bar']},
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				calculable : true,
				xAxis : [
				    {
				        type : 'category',
				        boundaryGap : false,
				        data : ['2014/09/23','2014/09/24','2014/09/25','2014/09/26','2014/09/27','2014/09/28','2014/09/29']
				    }
				],
				yAxis : [
				    {
				    	name : '用户数量（万）',
				        type : 'value'
				    }
				],
				series : [
				    {
				        name:'日在线用户',
				        type:'line',
				        itemStyle: {normal: {areaStyle: {type: 'default'}}},
				        data:[8, 11, 20, 13, 15, 5, 10],
				        markPoint : {
				            data : [
				                {type : 'max', name: '最大值'},
				                {type : 'min', name: '最小值'}
				            ]
				        },
				        markLine : {
				            data : [
				                {type : 'average', name: '平均值'}
				            ]
				        }
				    }
				]
            });
            var chart_02 = echarts.init(document.getElementById('monthly-online'),flat);//初始化时添加主题
            chart_02.setOption({
				tooltip : {
				    trigger: 'axis',
					formatter: function(v) {
					    return v[0][1] + '<br/>'
					           + v[0][0] + ' : ' + v[0][2] + ' (万)';
					}
				},
				legend: {
				    data:['月在线用户']
				},
				toolbox: {
				    show : true,
				    feature : {
				        magicType : {show: true, type: ['line', 'bar']},
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				calculable : true,
				xAxis : [
				    {
				        type : 'category',
				        boundaryGap : false,
				        data : ['2014/04','2014/05','2014/06','2014/07','2014/08','2014/09']
				    }
				],
				yAxis : [
				    {
				    	name : '用户数量（万）',
				        type : 'value'
				    }
				],
				series : [
				    {
				        name:'月在线用户',
				        type:'line',
				        itemStyle: {normal: {areaStyle: {type: 'default'}}},
				        data:[80, 110, 200, 130, 150, 50, 100],
				        markPoint : {
				            data : [
				                {type : 'max', name: '最大值'},
				                {type : 'min', name: '最小值'}
				            ]
				        },
				        markLine : {
				            data : [
				                {type : 'average', name: '平均值'}
				            ]
				        }
				    }
				]
            });
            var chart_03 = echarts.init(document.getElementById('active-users'),flat);//初始化时添加主题
            chart_03.setOption({
				tooltip : {
				    trigger: 'axis',
					formatter: function(v) {
					    return v[0][1] + '<br/>'
					           + v[0][0] + ' : ' + v[0][2] + ' (万)';
					}
				},
				legend: {
				    data:['活跃用户','在线用户']
				},
				toolbox: {
				    show : true,
				    feature : {
				        magicType : {show: true, type: ['line', 'bar']},
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				calculable : true,
				xAxis : [
				    {
				        type : 'category',
				        boundaryGap : false,
				        data : ['2014/09/23','2014/09/24','2014/09/25','2014/09/26','2014/09/27','2014/09/28','2014/09/29']
				    }
				],
				yAxis : [
				    {
				    	name : '用户数量（万）',
				        type : 'value'
				    }
				],
				series : [
				    {
				        name:'活跃用户',
				        type:'line',
				        smooth:true,
				        itemStyle: {normal: {areaStyle: {type: 'default'}}},
				        data:[2, 3, 7, 4, 5, 2, 3],
				        markPoint : {
				            data : [
				                {type : 'max', name: '最大值'},
				                {type : 'min', name: '最小值'}
				            ]
				        },
				        markLine : {
				            data : [
				                {type : 'average', name: '平均值'}
				            ]
				        }
				    },
				    {
				        name:'在线用户',
				        type:'line',
				        smooth:true,
				        itemStyle: {normal: {areaStyle: {type: 'default'}}},
				        data:[8, 11, 20, 13, 15, 5, 10],
				        markPoint : {
				            data : [
				                {type : 'max', name: '最大值'},
				                {type : 'min', name: '最小值'}
				            ]
				        },
				        markLine : {
				            data : [
				                {type : 'average', name: '平均值'}
				            ]
				        }
				    }
				]
            });
            var chart_04 = echarts.init(document.getElementById('new-users'),flat);//初始化时添加主题
            chart_04.setOption({
				tooltip : {
				    trigger: 'axis',
					formatter: function(v) {
					    return v[0][1] + '<br/>'
					           + v[0][0] + ' : ' + v[0][2] + ' (万)';
					}
				},
				legend: {
				    data:['新增用户']
				},
				toolbox: {
				    show : true,
				    feature : {
				        magicType : {show: true, type: ['line', 'bar']},
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				calculable : true,
				xAxis : [
				    {
				        type : 'category',
				        boundaryGap : false,
				        data : ['2014/09/23','2014/09/24','2014/09/25','2014/09/26','2014/09/27','2014/09/28','2014/09/29']
				    }
				],
				yAxis : [
				    {
				    	name : '用户数量（万）',
				        type : 'value'
				    }
				],
				series : [
				    {
				        name:'新增用户',
				        type:'line',
				        itemStyle: {normal: {areaStyle: {type: 'default'}}},
				        data:[8, 11, 20, 13, 15, 5, 10],
				        markPoint : {
				            data : [
				                {type : 'max', name: '最大值'},
				                {type : 'min', name: '最小值'}
				            ]
				        },
				        markLine : {
				            data : [
				                {type : 'average', name: '平均值'}
				            ]
				        }
				    }
				]
            });
			var chart_05 = echarts.init(document.getElementById('user-distribution-map'));//初始化时添加主题
			option_05 = {
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c}"
				},
				dataRange: {
				    orient: 'vertical',
				    min: 0,
				    max: 800,
				    text:['高','低'],           // 文本，默认为数值文本
				    splitNumber:0,
				    x: 'center',
				    y: 'center'
				},
				series : [
				    {
				        name: '全国用户分布（万）',
				        type: 'map',
				        mapType: 'china',
				        mapLocation: {
				            x: 'left',
				            y: 'center',
				            width: '40%'
				        },
				        roam: false,
				        selectedMode : 'single',
				        itemStyle:{
				            //normal:{label:{show:true}},
				            emphasis:{label:{show:true}}
				        },
				        data:[
							{name:'西藏', value:50},
							{name:'青海', value:70},
							{name:'宁夏', value:60},
							{name:'海南', value:50},
							{name:'甘肃', value:70},
							{name:'贵州', value:60},
							{name:'新疆', value:50},
							{name:'云南', value:50},
							{name:'重庆', value:100},
							{name:'吉林', value:50},
							{name:'山西', value:80},
							{name:'天津', value:20},
							{name:'江西', value:80},
							{name:'广西', value:60},
							{name:'陕西', value:150},
							{name:'黑龙江', value:100},
							{name:'内蒙古', value:120},
							{name:'安徽', value:150},
							{name:'北京', value:160},
							{name:'福建', value:200},
							{name:'上海', value:140},
							{name:'湖北', value:250},
							{name:'湖南', value:350},
							{name:'四川', value:800,selected:true},
							{name:'辽宁', value:290},
							{name:'河北', value:300},
							{name:'河南', value:340},
							{name:'浙江', value:330},
							{name:'山东', value:400},
							{name:'江苏', value:370},
							{name:'广东', value:360}
				        ]
				    },
				    {
						name: '各省市用户分布（万）',
						type: 'map',
						mapType: '四川',
						itemStyle:{
						    normal:{label:{show:true}},
						    emphasis:{label:{show:true}}
						},
						mapLocation: {
						    x: '60%',
						    y: 'center',
						    width: '40%'
						},
						data : [
							{name: '甘孜藏族自治州',value: Math.round(Math.random()*200)},
							{name: '阿坝藏族羌族自治州',value: Math.round(Math.random()*200)},
							{name: '凉山彝族自治州',value: Math.round(Math.random()*200)},
							{name: '绵阳市',value: Math.round(Math.random()*200)},
							{name: '达州市',value: Math.round(Math.random()*200)},
							{name: '广元市',value: Math.round(Math.random()*200)},
							{name: '雅安市',value: Math.round(Math.random()*200)},
							{name: '宜宾市',value: Math.round(Math.random()*200)},
							{name: '乐山市',value: Math.round(Math.random()*200)},
							{name: '南充市',value: Math.round(Math.random()*200)},
							{name: '巴中市',value: Math.round(Math.random()*200)},
							{name: '泸州市',value: Math.round(Math.random()*200)},
							{name: '成都市',value: Math.round(Math.random()*200)},
							{name: '资阳市',value: Math.round(Math.random()*200)},
							{name: '攀枝花市',value: Math.round(Math.random()*200)},
							{name: '眉山市',value: Math.round(Math.random()*200)},
							{name: '广安市',value: Math.round(Math.random()*200)},
							{name: '德阳市',value: Math.round(Math.random()*200)},
							{name: '内江市',value: Math.round(Math.random()*200)},
							{name: '遂宁市',value: Math.round(Math.random()*200)},
							{name: '自贡市',value: Math.round(Math.random()*200)}
						]
				    }
				]
			};
			chart_05.setOption(option_05,true);
			chart_05.on(echarts.config.EVENT.MAP_SELECTED, function (param){
				var len = option_05.series[0].data.length;
				var selected = param.selected;
				var selectedProvince;
				var name;
				for (var i = 0, l = len; i < l; i++) {
				    name = option_05.series[0].data[i].name;
				    option_05.series[0].data[i].selected = selected[name];
				    if (selected[name]) {
				        selectedProvince = name;
				    }
				};
				if (typeof selectedProvince == 'undefined') {
				    chart_05.setOption(option_05, true);
				    return;
				}
				option_05.series[1] = {
				    name: '各省市用户分布（万）',
				    type: 'map',
				    mapType: selectedProvince,
				    itemStyle:{
				        normal:{label:{show:true}},
				        emphasis:{label:{show:true}}
				    },
				    mapLocation: {
				        x: '60%',
				        y: 'center',
				        width: '40%'
				    },
				    data:[
				        {name: '重庆市',value: Math.round(Math.random()*200)},
				        {name: '北京市',value: Math.round(Math.random()*200)},
				        {name: '天津市',value: Math.round(Math.random()*200)},
				        {name: '上海市',value: Math.round(Math.random()*200)},
				        {name: '香港',value: Math.round(Math.random()*200)},
				        {name: '澳门',value: Math.round(Math.random()*200)},
				        {name: '巴音郭楞蒙古自治州',value: Math.round(Math.random()*200)},
				        {name: '和田地区',value: Math.round(Math.random()*200)},
				        {name: '哈密地区',value: Math.round(Math.random()*200)},
				        {name: '阿克苏地区',value: Math.round(Math.random()*200)},
				        {name: '阿勒泰地区',value: Math.round(Math.random()*200)},
				        {name: '喀什地区',value: Math.round(Math.random()*200)},
				        {name: '塔城地区',value: Math.round(Math.random()*200)},
				        {name: '昌吉回族自治州',value: Math.round(Math.random()*200)},
				        {name: '克孜勒苏柯尔克孜自治州',value: Math.round(Math.random()*200)},
				        {name: '吐鲁番地区',value: Math.round(Math.random()*200)},
				        {name: '伊犁哈萨克自治州',value: Math.round(Math.random()*200)},
				        {name: '博尔塔拉蒙古自治州',value: Math.round(Math.random()*200)},
				        {name: '乌鲁木齐市',value: Math.round(Math.random()*200)},
				        {name: '克拉玛依市',value: Math.round(Math.random()*200)},
				        {name: '阿拉尔市',value: Math.round(Math.random()*200)},
				        {name: '图木舒克市',value: Math.round(Math.random()*200)},
				        {name: '五家渠市',value: Math.round(Math.random()*200)},
				        {name: '石河子市',value: Math.round(Math.random()*200)},
				        {name: '那曲地区',value: Math.round(Math.random()*200)},
				        {name: '阿里地区',value: Math.round(Math.random()*200)},
				        {name: '日喀则地区',value: Math.round(Math.random()*200)},
				        {name: '林芝地区',value: Math.round(Math.random()*200)},
				        {name: '昌都地区',value: Math.round(Math.random()*200)},
				        {name: '山南地区',value: Math.round(Math.random()*200)},
				        {name: '拉萨市',value: Math.round(Math.random()*200)},
				        {name: '呼伦贝尔市',value: Math.round(Math.random()*200)},
				        {name: '阿拉善盟',value: Math.round(Math.random()*200)},
				        {name: '锡林郭勒盟',value: Math.round(Math.random()*200)},
				        {name: '鄂尔多斯市',value: Math.round(Math.random()*200)},
				        {name: '赤峰市',value: Math.round(Math.random()*200)},
				        {name: '巴彦淖尔市',value: Math.round(Math.random()*200)},
				        {name: '通辽市',value: Math.round(Math.random()*200)},
				        {name: '乌兰察布市',value: Math.round(Math.random()*200)},
				        {name: '兴安盟',value: Math.round(Math.random()*200)},
				        {name: '包头市',value: Math.round(Math.random()*200)},
				        {name: '呼和浩特市',value: Math.round(Math.random()*200)},
				        {name: '乌海市',value: Math.round(Math.random()*200)},
				        {name: '海西蒙古族藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '玉树藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '果洛藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '海南藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '海北藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '黄南藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '海东地区',value: Math.round(Math.random()*200)},
				        {name: '西宁市',value: Math.round(Math.random()*200)},
				        {name: '甘孜藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '阿坝藏族羌族自治州',value: Math.round(Math.random()*200)},
				        {name: '凉山彝族自治州',value: Math.round(Math.random()*200)},
				        {name: '绵阳市',value: Math.round(Math.random()*200)},
				        {name: '达州市',value: Math.round(Math.random()*200)},
				        {name: '广元市',value: Math.round(Math.random()*200)},
				        {name: '雅安市',value: Math.round(Math.random()*200)},
				        {name: '宜宾市',value: Math.round(Math.random()*200)},
				        {name: '乐山市',value: Math.round(Math.random()*200)},
				        {name: '南充市',value: Math.round(Math.random()*200)},
				        {name: '巴中市',value: Math.round(Math.random()*200)},
				        {name: '泸州市',value: Math.round(Math.random()*200)},
				        {name: '成都市',value: Math.round(Math.random()*200)},
				        {name: '资阳市',value: Math.round(Math.random()*200)},
				        {name: '攀枝花市',value: Math.round(Math.random()*200)},
				        {name: '眉山市',value: Math.round(Math.random()*200)},
				        {name: '广安市',value: Math.round(Math.random()*200)},
				        {name: '德阳市',value: Math.round(Math.random()*200)},
				        {name: '内江市',value: Math.round(Math.random()*200)},
				        {name: '遂宁市',value: Math.round(Math.random()*200)},
				        {name: '自贡市',value: Math.round(Math.random()*200)},
				        {name: '黑河市',value: Math.round(Math.random()*200)},
				        {name: '大兴安岭地区',value: Math.round(Math.random()*200)},
				        {name: '哈尔滨市',value: Math.round(Math.random()*200)},
				        {name: '齐齐哈尔市',value: Math.round(Math.random()*200)},
				        {name: '牡丹江市',value: Math.round(Math.random()*200)},
				        {name: '绥化市',value: Math.round(Math.random()*200)},
				        {name: '伊春市',value: Math.round(Math.random()*200)},
				        {name: '佳木斯市',value: Math.round(Math.random()*200)},
				        {name: '鸡西市',value: Math.round(Math.random()*200)},
				        {name: '双鸭山市',value: Math.round(Math.random()*200)},
				        {name: '大庆市',value: Math.round(Math.random()*200)},
				        {name: '鹤岗市',value: Math.round(Math.random()*200)},
				        {name: '七台河市',value: Math.round(Math.random()*200)},
				        {name: '酒泉市',value: Math.round(Math.random()*200)},
				        {name: '张掖市',value: Math.round(Math.random()*200)},
				        {name: '甘南藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '武威市',value: Math.round(Math.random()*200)},
				        {name: '陇南市',value: Math.round(Math.random()*200)},
				        {name: '庆阳市',value: Math.round(Math.random()*200)},
				        {name: '白银市',value: Math.round(Math.random()*200)},
				        {name: '定西市',value: Math.round(Math.random()*200)},
				        {name: '天水市',value: Math.round(Math.random()*200)},
				        {name: '兰州市',value: Math.round(Math.random()*200)},
				        {name: '平凉市',value: Math.round(Math.random()*200)},
				        {name: '临夏回族自治州',value: Math.round(Math.random()*200)},
				        {name: '金昌市',value: Math.round(Math.random()*200)},
				        {name: '嘉峪关市',value: Math.round(Math.random()*200)},
				        {name: '普洱市',value: Math.round(Math.random()*200)},
				        {name: '红河哈尼族彝族自治州',value: Math.round(Math.random()*200)},
				        {name: '文山壮族苗族自治州',value: Math.round(Math.random()*200)},
				        {name: '曲靖市',value: Math.round(Math.random()*200)},
				        {name: '楚雄彝族自治州',value: Math.round(Math.random()*200)},
				        {name: '大理白族自治州',value: Math.round(Math.random()*200)},
				        {name: '临沧市',value: Math.round(Math.random()*200)},
				        {name: '迪庆藏族自治州',value: Math.round(Math.random()*200)},
				        {name: '昭通市',value: Math.round(Math.random()*200)},
				        {name: '昆明市',value: Math.round(Math.random()*200)},
				        {name: '丽江市',value: Math.round(Math.random()*200)},
				        {name: '西双版纳傣族自治州',value: Math.round(Math.random()*200)},
				        {name: '保山市',value: Math.round(Math.random()*200)},
				        {name: '玉溪市',value: Math.round(Math.random()*200)},
				        {name: '怒江傈僳族自治州',value: Math.round(Math.random()*200)},
				        {name: '德宏傣族景颇族自治州',value: Math.round(Math.random()*200)},
				        {name: '百色市',value: Math.round(Math.random()*200)},
				        {name: '河池市',value: Math.round(Math.random()*200)},
				        {name: '桂林市',value: Math.round(Math.random()*200)},
				        {name: '南宁市',value: Math.round(Math.random()*200)},
				        {name: '柳州市',value: Math.round(Math.random()*200)},
				        {name: '崇左市',value: Math.round(Math.random()*200)},
				        {name: '来宾市',value: Math.round(Math.random()*200)},
				        {name: '玉林市',value: Math.round(Math.random()*200)},
				        {name: '梧州市',value: Math.round(Math.random()*200)},
				        {name: '贺州市',value: Math.round(Math.random()*200)},
				        {name: '钦州市',value: Math.round(Math.random()*200)},
				        {name: '贵港市',value: Math.round(Math.random()*200)},
				        {name: '防城港市',value: Math.round(Math.random()*200)},
				        {name: '北海市',value: Math.round(Math.random()*200)},
				        {name: '怀化市',value: Math.round(Math.random()*200)},
				        {name: '永州市',value: Math.round(Math.random()*200)},
				        {name: '邵阳市',value: Math.round(Math.random()*200)},
				        {name: '郴州市',value: Math.round(Math.random()*200)},
				        {name: '常德市',value: Math.round(Math.random()*200)},
				        {name: '湘西土家族苗族自治州',value: Math.round(Math.random()*200)},
				        {name: '衡阳市',value: Math.round(Math.random()*200)},
				        {name: '岳阳市',value: Math.round(Math.random()*200)},
				        {name: '益阳市',value: Math.round(Math.random()*200)},
				        {name: '长沙市',value: Math.round(Math.random()*200)},
				        {name: '株洲市',value: Math.round(Math.random()*200)},
				        {name: '张家界市',value: Math.round(Math.random()*200)},
				        {name: '娄底市',value: Math.round(Math.random()*200)},
				        {name: '湘潭市',value: Math.round(Math.random()*200)},
				        {name: '榆林市',value: Math.round(Math.random()*200)},
				        {name: '延安市',value: Math.round(Math.random()*200)},
				        {name: '汉中市',value: Math.round(Math.random()*200)},
				        {name: '安康市',value: Math.round(Math.random()*200)},
				        {name: '商洛市',value: Math.round(Math.random()*200)},
				        {name: '宝鸡市',value: Math.round(Math.random()*200)},
				        {name: '渭南市',value: Math.round(Math.random()*200)},
				        {name: '咸阳市',value: Math.round(Math.random()*200)},
				        {name: '西安市',value: Math.round(Math.random()*200)},
				        {name: '铜川市',value: Math.round(Math.random()*200)},
				        {name: '清远市',value: Math.round(Math.random()*200)},
				        {name: '韶关市',value: Math.round(Math.random()*200)},
				        {name: '湛江市',value: Math.round(Math.random()*200)},
				        {name: '梅州市',value: Math.round(Math.random()*200)},
				        {name: '河源市',value: Math.round(Math.random()*200)},
				        {name: '肇庆市',value: Math.round(Math.random()*200)},
				        {name: '惠州市',value: Math.round(Math.random()*200)},
				        {name: '茂名市',value: Math.round(Math.random()*200)},
				        {name: '江门市',value: Math.round(Math.random()*200)},
				        {name: '阳江市',value: Math.round(Math.random()*200)},
				        {name: '云浮市',value: Math.round(Math.random()*200)},
				        {name: '广州市',value: Math.round(Math.random()*200)},
				        {name: '汕尾市',value: Math.round(Math.random()*200)},
				        {name: '揭阳市',value: Math.round(Math.random()*200)},
				        {name: '珠海市',value: Math.round(Math.random()*200)},
				        {name: '佛山市',value: Math.round(Math.random()*200)},
				        {name: '潮州市',value: Math.round(Math.random()*200)},
				        {name: '汕头市',value: Math.round(Math.random()*200)},
				        {name: '深圳市',value: Math.round(Math.random()*200)},
				        {name: '东莞市',value: Math.round(Math.random()*200)},
				        {name: '中山市',value: Math.round(Math.random()*200)},
				        {name: '延边朝鲜族自治州',value: Math.round(Math.random()*200)},
				        {name: '吉林市',value: Math.round(Math.random()*200)},
				        {name: '白城市',value: Math.round(Math.random()*200)},
				        {name: '松原市',value: Math.round(Math.random()*200)},
				        {name: '长春市',value: Math.round(Math.random()*200)},
				        {name: '白山市',value: Math.round(Math.random()*200)},
				        {name: '通化市',value: Math.round(Math.random()*200)},
				        {name: '四平市',value: Math.round(Math.random()*200)},
				        {name: '辽源市',value: Math.round(Math.random()*200)},
				        {name: '承德市',value: Math.round(Math.random()*200)},
				        {name: '张家口市',value: Math.round(Math.random()*200)},
				        {name: '保定市',value: Math.round(Math.random()*200)},
				        {name: '唐山市',value: Math.round(Math.random()*200)},
				        {name: '沧州市',value: Math.round(Math.random()*200)},
				        {name: '石家庄市',value: Math.round(Math.random()*200)},
				        {name: '邢台市',value: Math.round(Math.random()*200)},
				        {name: '邯郸市',value: Math.round(Math.random()*200)},
				        {name: '秦皇岛市',value: Math.round(Math.random()*200)},
				        {name: '衡水市',value: Math.round(Math.random()*200)},
				        {name: '廊坊市',value: Math.round(Math.random()*200)},
				        {name: '恩施土家族苗族自治州',value: Math.round(Math.random()*200)},
				        {name: '十堰市',value: Math.round(Math.random()*200)},
				        {name: '宜昌市',value: Math.round(Math.random()*200)},
				        {name: '襄樊市',value: Math.round(Math.random()*200)},
				        {name: '黄冈市',value: Math.round(Math.random()*200)},
				        {name: '荆州市',value: Math.round(Math.random()*200)},
				        {name: '荆门市',value: Math.round(Math.random()*200)},
				        {name: '咸宁市',value: Math.round(Math.random()*200)},
				        {name: '随州市',value: Math.round(Math.random()*200)},
				        {name: '孝感市',value: Math.round(Math.random()*200)},
				        {name: '武汉市',value: Math.round(Math.random()*200)},
				        {name: '黄石市',value: Math.round(Math.random()*200)},
				        {name: '神农架林区',value: Math.round(Math.random()*200)},
				        {name: '天门市',value: Math.round(Math.random()*200)},
				        {name: '仙桃市',value: Math.round(Math.random()*200)},
				        {name: '潜江市',value: Math.round(Math.random()*200)},
				        {name: '鄂州市',value: Math.round(Math.random()*200)},
				        {name: '遵义市',value: Math.round(Math.random()*200)},
				        {name: '黔东南苗族侗族自治州',value: Math.round(Math.random()*200)},
				        {name: '毕节地区',value: Math.round(Math.random()*200)},
				        {name: '黔南布依族苗族自治州',value: Math.round(Math.random()*200)},
				        {name: '铜仁地区',value: Math.round(Math.random()*200)},
				        {name: '黔西南布依族苗族自治州',value: Math.round(Math.random()*200)},
				        {name: '六盘水市',value: Math.round(Math.random()*200)},
				        {name: '安顺市',value: Math.round(Math.random()*200)},
				        {name: '贵阳市',value: Math.round(Math.random()*200)},
				        {name: '烟台市',value: Math.round(Math.random()*200)},
				        {name: '临沂市',value: Math.round(Math.random()*200)},
				        {name: '潍坊市',value: Math.round(Math.random()*200)},
				        {name: '青岛市',value: Math.round(Math.random()*200)},
				        {name: '菏泽市',value: Math.round(Math.random()*200)},
				        {name: '济宁市',value: Math.round(Math.random()*200)},
				        {name: '德州市',value: Math.round(Math.random()*200)},
				        {name: '滨州市',value: Math.round(Math.random()*200)},
				        {name: '聊城市',value: Math.round(Math.random()*200)},
				        {name: '东营市',value: Math.round(Math.random()*200)},
				        {name: '济南市',value: Math.round(Math.random()*200)},
				        {name: '泰安市',value: Math.round(Math.random()*200)},
				        {name: '威海市',value: Math.round(Math.random()*200)},
				        {name: '日照市',value: Math.round(Math.random()*200)},
				        {name: '淄博市',value: Math.round(Math.random()*200)},
				        {name: '枣庄市',value: Math.round(Math.random()*200)},
				        {name: '莱芜市',value: Math.round(Math.random()*200)},
				        {name: '赣州市',value: Math.round(Math.random()*200)},
				        {name: '吉安市',value: Math.round(Math.random()*200)},
				        {name: '上饶市',value: Math.round(Math.random()*200)},
				        {name: '九江市',value: Math.round(Math.random()*200)},
				        {name: '抚州市',value: Math.round(Math.random()*200)},
				        {name: '宜春市',value: Math.round(Math.random()*200)},
				        {name: '南昌市',value: Math.round(Math.random()*200)},
				        {name: '景德镇市',value: Math.round(Math.random()*200)},
				        {name: '萍乡市',value: Math.round(Math.random()*200)},
				        {name: '鹰潭市',value: Math.round(Math.random()*200)},
				        {name: '新余市',value: Math.round(Math.random()*200)},
				        {name: '南阳市',value: Math.round(Math.random()*200)},
				        {name: '信阳市',value: Math.round(Math.random()*200)},
				        {name: '洛阳市',value: Math.round(Math.random()*200)},
				        {name: '驻马店市',value: Math.round(Math.random()*200)},
				        {name: '周口市',value: Math.round(Math.random()*200)},
				        {name: '商丘市',value: Math.round(Math.random()*200)},
				        {name: '三门峡市',value: Math.round(Math.random()*200)},
				        {name: '新乡市',value: Math.round(Math.random()*200)},
				        {name: '平顶山市',value: Math.round(Math.random()*200)},
				        {name: '郑州市',value: Math.round(Math.random()*200)},
				        {name: '安阳市',value: Math.round(Math.random()*200)},
				        {name: '开封市',value: Math.round(Math.random()*200)},
				        {name: '焦作市',value: Math.round(Math.random()*200)},
				        {name: '许昌市',value: Math.round(Math.random()*200)},
				        {name: '濮阳市',value: Math.round(Math.random()*200)},
				        {name: '漯河市',value: Math.round(Math.random()*200)},
				        {name: '鹤壁市',value: Math.round(Math.random()*200)},
				        {name: '大连市',value: Math.round(Math.random()*200)},
				        {name: '朝阳市',value: Math.round(Math.random()*200)},
				        {name: '丹东市',value: Math.round(Math.random()*200)},
				        {name: '铁岭市',value: Math.round(Math.random()*200)},
				        {name: '沈阳市',value: Math.round(Math.random()*200)},
				        {name: '抚顺市',value: Math.round(Math.random()*200)},
				        {name: '葫芦岛市',value: Math.round(Math.random()*200)},
				        {name: '阜新市',value: Math.round(Math.random()*200)},
				        {name: '锦州市',value: Math.round(Math.random()*200)},
				        {name: '鞍山市',value: Math.round(Math.random()*200)},
				        {name: '本溪市',value: Math.round(Math.random()*200)},
				        {name: '营口市',value: Math.round(Math.random()*200)},
				        {name: '辽阳市',value: Math.round(Math.random()*200)},
				        {name: '盘锦市',value: Math.round(Math.random()*200)},
				        {name: '忻州市',value: Math.round(Math.random()*200)},
				        {name: '吕梁市',value: Math.round(Math.random()*200)},
				        {name: '临汾市',value: Math.round(Math.random()*200)},
				        {name: '晋中市',value: Math.round(Math.random()*200)},
				        {name: '运城市',value: Math.round(Math.random()*200)},
				        {name: '大同市',value: Math.round(Math.random()*200)},
				        {name: '长治市',value: Math.round(Math.random()*200)},
				        {name: '朔州市',value: Math.round(Math.random()*200)},
				        {name: '晋城市',value: Math.round(Math.random()*200)},
				        {name: '太原市',value: Math.round(Math.random()*200)},
				        {name: '阳泉市',value: Math.round(Math.random()*200)},
				        {name: '六安市',value: Math.round(Math.random()*200)},
				        {name: '安庆市',value: Math.round(Math.random()*200)},
				        {name: '滁州市',value: Math.round(Math.random()*200)},
				        {name: '宣城市',value: Math.round(Math.random()*200)},
				        {name: '阜阳市',value: Math.round(Math.random()*200)},
				        {name: '宿州市',value: Math.round(Math.random()*200)},
				        {name: '黄山市',value: Math.round(Math.random()*200)},
				        {name: '巢湖市',value: Math.round(Math.random()*200)},
				        {name: '亳州市',value: Math.round(Math.random()*200)},
				        {name: '池州市',value: Math.round(Math.random()*200)},
				        {name: '合肥市',value: Math.round(Math.random()*200)},
				        {name: '蚌埠市',value: Math.round(Math.random()*200)},
				        {name: '芜湖市',value: Math.round(Math.random()*200)},
				        {name: '淮北市',value: Math.round(Math.random()*200)},
				        {name: '淮南市',value: Math.round(Math.random()*200)},
				        {name: '马鞍山市',value: Math.round(Math.random()*200)},
				        {name: '铜陵市',value: Math.round(Math.random()*200)},
				        {name: '南平市',value: Math.round(Math.random()*200)},
				        {name: '三明市',value: Math.round(Math.random()*200)},
				        {name: '龙岩市',value: Math.round(Math.random()*200)},
				        {name: '宁德市',value: Math.round(Math.random()*200)},
				        {name: '福州市',value: Math.round(Math.random()*200)},
				        {name: '漳州市',value: Math.round(Math.random()*200)},
				        {name: '泉州市',value: Math.round(Math.random()*200)},
				        {name: '莆田市',value: Math.round(Math.random()*200)},
				        {name: '厦门市',value: Math.round(Math.random()*200)},
				        {name: '丽水市',value: Math.round(Math.random()*200)},
				        {name: '杭州市',value: Math.round(Math.random()*200)},
				        {name: '温州市',value: Math.round(Math.random()*200)},
				        {name: '宁波市',value: Math.round(Math.random()*200)},
				        {name: '舟山市',value: Math.round(Math.random()*200)},
				        {name: '台州市',value: Math.round(Math.random()*200)},
				        {name: '金华市',value: Math.round(Math.random()*200)},
				        {name: '衢州市',value: Math.round(Math.random()*200)},
				        {name: '绍兴市',value: Math.round(Math.random()*200)},
				        {name: '嘉兴市',value: Math.round(Math.random()*200)},
				        {name: '湖州市',value: Math.round(Math.random()*200)},
				        {name: '盐城市',value: Math.round(Math.random()*200)},
				        {name: '徐州市',value: Math.round(Math.random()*200)},
				        {name: '南通市',value: Math.round(Math.random()*200)},
				        {name: '淮安市',value: Math.round(Math.random()*200)},
				        {name: '苏州市',value: Math.round(Math.random()*200)},
				        {name: '宿迁市',value: Math.round(Math.random()*200)},
				        {name: '连云港市',value: Math.round(Math.random()*200)},
				        {name: '扬州市',value: Math.round(Math.random()*200)},
				        {name: '南京市',value: Math.round(Math.random()*200)},
				        {name: '泰州市',value: Math.round(Math.random()*200)},
				        {name: '无锡市',value: Math.round(Math.random()*200)},
				        {name: '常州市',value: Math.round(Math.random()*200)},
				        {name: '镇江市',value: Math.round(Math.random()*200)},
				        {name: '吴忠市',value: Math.round(Math.random()*200)},
				        {name: '中卫市',value: Math.round(Math.random()*200)},
				        {name: '固原市',value: Math.round(Math.random()*200)},
				        {name: '银川市',value: Math.round(Math.random()*200)},
				        {name: '石嘴山市',value: Math.round(Math.random()*200)},
				        {name: '儋州市',value: Math.round(Math.random()*200)},
				        {name: '文昌市',value: Math.round(Math.random()*200)},
				        {name: '乐东黎族自治县',value: Math.round(Math.random()*200)},
				        {name: '三亚市',value: Math.round(Math.random()*200)},
				        {name: '琼中黎族苗族自治县',value: Math.round(Math.random()*200)},
				        {name: '东方市',value: Math.round(Math.random()*200)},
				        {name: '海口市',value: Math.round(Math.random()*200)},
				        {name: '万宁市',value: Math.round(Math.random()*200)},
				        {name: '澄迈县',value: Math.round(Math.random()*200)},
				        {name: '白沙黎族自治县',value: Math.round(Math.random()*200)},
				        {name: '琼海市',value: Math.round(Math.random()*200)},
				        {name: '昌江黎族自治县',value: Math.round(Math.random()*200)},
				        {name: '临高县',value: Math.round(Math.random()*200)},
				        {name: '陵水黎族自治县',value: Math.round(Math.random()*200)},
				        {name: '屯昌县',value: Math.round(Math.random()*200)},
				        {name: '定安县',value: Math.round(Math.random()*200)},
				        {name: '保亭黎族苗族自治县',value: Math.round(Math.random()*200)},
				        {name: '五指山市',value: Math.round(Math.random()*200)}
				    ]
				};
				chart_05.setOption(option_05,true);
			});
			var chart_06 = echarts.init(document.getElementById('user-distribution-pie'),flat);//初始化时添加主题
			option_06 = {
				title : {
				    text: '全国用户分布比例图',
				    subtext: '数量排名前十',
				    x:'center'
				},
				tooltip : {
				    trigger: 'item',
				    formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series : [
				    {
				        name:'全国用户分布（万）',
				        type:'pie',
				        radius : '50%',
				        center: ['50%', '50%'],
				        data:[
				        	{name:'四川', value:800},
				        	{name:'山东', value:400},
				        	{name:'江苏', value:370},
				        	{name:'广东', value:360},
				        	{name:'湖南', value:350},
				        	{name:'河南', value:340},
				        	{name:'浙江', value:330},
				        	{name:'河北', value:300},
				        	{name:'辽宁', value:290},
				        	{name:'湖北', value:250},
							{name:'其余地区', value:1000}
				        ]
				    }
				]
			};
			chart_06.setOption(option_06);
        </script>
		<!-- echarts -->
		<!-- 页面js 结束-->
	</body>
</html>